<template>
  <div id="brief-box">
    <!-- 头部 -->
    <div class="box2">
      <div class="box2left">
        <div class="box2left1">
          <div class="box2left1-1">快速导航</div>
          <div class="box2left1-2">Quick navigation</div>
        </div>
        <div class="box2left2">
          <div class="box2left2-1">院部简介</div>
        </div>
      </div>
      <div class="box2right">
        <div class="box2righttop">
          <div class="box2righttop-left">
            <div class="box2righttop-left1">
              <img src="../../assets/简介.png" />
            </div>
            <div class="box2righttop-left2">院部简介</div>
          </div>
          <div class="box2righttop-center">
            当前位置：首页>院部简介
          </div>
          <div class="box2righttop-right">
            <div class="box2righttop-right1">
              <input type="text" placeholder="输入关键词搜索" />
            </div>
            <div class="box2righttop-right2">
              <img src="../../assets/搜索.png" />
            </div>
          </div>
        </div>
        <div class="box2rightcenter">
          <div @click="layOut1">
            <img
              @click="Click1"
              v-if="lay_type1"
              src="../../assets/列表.png"
              alt=""
            />
            <img @click="Click1" v-else src="../../assets/分类.png" alt="" />
          </div>
          <div @click="layOut2">
            <img
              @click="Click2"
              v-if="lay_type2"
              src="../../assets/fend.png"
              alt=""
            />
            <img
              @click="Click2"
              v-else
              src="../../assets/分类 (1).png"
              alt=""
            />
          </div>
          <div @click="layOut3">
            <img
              @click="Click3"
              v-if="lay_type3"
              src="../../assets/分类-1.png"
              alt=""
            />
            <img @click="Click3" v-else src="../../assets/分类3.png " alt="" />
          </div>
        </div>
        <div id="box2rightcontent" class="box2rightcontent1">
          <ul>
            <li v-for="(item, index) in jie" :key="index">
              <div class="neirong">
                <div class="neirongleft">
                  <img :src="item.img1" />
                </div>
                <div class="neirongright">
                  <div class="neirongright1">
                    {{ item.text }}
                  </div>
                  <div class="neirongright2">
                    <div class="neirongright2-1">
                      <img src="../../assets/时间.png" />
                    </div>
                    <div class="neirongright2-2">{{ item.day }}</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="box2rightbottom">
          查看更多
          <img src="../../assets/4.png" />
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="footcenter">
        <div class="footcenter-left">
          <img src="../../assets/3-min.png" alt="" />
        </div>
        <div class="footcenter-center">
          <div class="footcenter-left-2">
            <table>
              <tr>
                <td>办公室</td>
                <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
              </tr>
              <tr>
                <td>招生咨询</td>
                <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
              </tr>
              <tr>
                <td>官网</td>
                <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
              </tr>
              <tr>
                <td>邮箱</td>
                <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
              </tr>
              <tr>
                <td>校址</td>
                <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="footcenter-right">
          <div class="footcenter-right-top">
            <img
              class="footcenter-right1"
              src="../../assets/微信.png"
            /><br />官方微信
          </div>
          <div class="footcenter-right-bottom">
            <img
              class="footcenter-right2"
              src="../../assets/微博.png"
            /><br />官方微博
          </div>
        </div>
      </div>
      <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
    </div>
    <!-- 手机端底部 -->
    <div class="footph">
      <div class="footcenter">
        <div class="footcenter-center">
          <img src="../../assets/3-min.png" alt="" />
        </div>
        <div class="fp-bot">
          <div class="footcenter-left">
            <div class="footcenter-left-1">联系我们</div>
            <div class="footcenter-left-2">
              <table>
                <tr>
                  <td>办公室</td>
                  <td>&nbsp;:&nbsp;&nbsp;0535-2246666</td>
                </tr>
                <tr>
                  <td>招生咨询</td>
                  <td>&nbsp;:&nbsp;&nbsp;0535-2246625</td>
                </tr>
                <tr>
                  <td>官网</td>
                  <td>&nbsp;:&nbsp;&nbsp;www.sdcc.edu.cn</td>
                </tr>
                <tr>
                  <td>邮箱</td>
                  <td>&nbsp;:&nbsp;&nbsp;sdccxy@126.com</td>
                </tr>
                <tr>
                  <td>校址</td>
                  <td>&nbsp;:&nbsp;&nbsp;山东省烟台市高新区海天路1001号</td>
                </tr>
              </table>
            </div>
          </div>
          <div class="footcenter-right">
            <img src="../../assets/微信二维码.png" alt="" />
          </div>
        </div>
      </div>
      <div class="footbottom">Copyright 心山东省城市服务技师学院版权所有</div>
    </div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    const jie = reactive([
      {
        text: "山东城院召开公文写作培训会",
        day: "2021-10-19",
        img1: "../../../public/xh.png",
      },
      {
        text: "关于报送 2022 年部门重点工作和日常工作的通知",
        day: "2021-10-19",
        img1: "../../../public/xh.png",
      },
      {
        text: "速读山东城院年度工作报告",
        day: "2021-1019",
        img1: "../../../public/xh.png",
      },
      {
        text: "中国共产党山东省城市服务技师学院第一届委员会第五次全体会议公报",
        day: "2021-10-19",
        img1: "../../../public/xh.png",
      },
      {
        text: "山东城院召开2022年度工作会议",
        day: "2021-10-19",
        img1: "../../../public/xh.png",
      },
      {
        text: "关于召开3月份月度调度会的通知",
        day: "2021-10-19",
        img1: "../../../public/xh.png",
      },
    ]);
    const lay_type1 = ref(0);
    const lay_type2 = ref(0);
    const lay_type3 = ref(0);

    return {
      jie,
      lay_type1,
      lay_type2,
      lay_type3,
    };
  },
  methods: {
    Click1() {
      // console.log('Click1');
      const box2rightcontent = document.getElementById("box2rightcontent");
      box2rightcontent.className = "box2rightcontent1";
      // const box2rightcentertu1 = document.getElementById("box2rightcentertu1");
      // box2rightcentertu1.src = "../assets/sucai/fen11.png"
      // console.log(box2rightcentertu1.src);
    },
    Click2() {
      // console.log('Click2');
      const box2rightcontent = document.getElementById("box2rightcontent");
      box2rightcontent.className = "box2rightcontent2";
      // const box2rightcentertu2 = document.getElementById("box2rightcentertu2");
      // box2rightcentertu2.src = "../assets/sucai/fen11.png"
      // console.log(box2rightcentertu2.src);
    },
    Click3() {
      // console.log('Click3');
      const box2rightcontent = document.getElementById("box2rightcontent");
      box2rightcontent.className = "box2rightcontent3";
      // const box2rightcentertu3 = document.getElementById("box2rightcentertu3");
      // box2rightcentertu3.src = "../assets/sucai/fen11.png"
      // console.log(box2rightcentertu3.src);
    },
    layOut1() {
      if (this.lay_type1 == 0) {
        this.lay_type1 = 1;

        this.lay_type2 = 0;
        this.lay_type3 = 0;
      } else {
        this.lay_type1 = 0;
      }
    },
    layOut2() {
      if (this.lay_type2 == 0) {
        this.lay_type2 = 1;

        this.lay_type1 = 0;
        this.lay_type3 = 0;
      } else {
        this.lay_type2 = 0;
      }
    },
    layOut3() {
      if (this.lay_type3 == 0) {
        this.lay_type3 = 1;

        this.lay_type2 = 0;
        this.lay_type1 = 0;
      } else {
        this.lay_type3 = 0;
      }
    },
  },
};
</script>

<style lang="scss">
@import "./brief.css";
</style>
